<template>
  <el-row class="analysisWrap">
    <el-row type="flex" justify="space-between" style="height: 40px">
      <el-col style="color: #ffffff;font-size: 16px;padding-bottom: 4px">
        {{ type }}业务趋势图
      </el-col>
      <el-col align="right">
        <el-switch
          style="display: block"
          v-model="dateTYpe"
          :active-value="20"
          :inactive-value="10"
          active-color="#0050ff"
          inactive-color="#0050ff"
          active-text="月"
          inactive-text="日"
          @change="getTrend()"
        >
        </el-switch>
      </el-col>
    </el-row>
    <ThreeLineCharts
      :chartData="chartData"
      :height="'100%'"
    />
  </el-row>
</template>

<script>
  import ThreeLineCharts from './ThreeLineCharts'
  export default {
    name: "ThreeBottom",
    components: {
      ThreeLineCharts
    },
    props: {
      type: {
        type: String,
        default: ''
      },
      typeValue: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        chartData: {
          dataY: [],
          dataLine: [],
          threshold: 0
        },
        dateTYpe: 10,
        exchange: 1,
        code: null
      }
    },
    created() {
      this.$bus.$off('provinceChangedThree')
      this.$bus.$on('provinceChangedThree', this.getTrend)
    },
    methods: {
      getTrend(code){
        if (code) {
          this.code = code
        }
        window._api.apiQualityTrend({ type: this.typeValue, code: this.code, date_type: this.dateTYpe }).then(res => {
          if (res.state === 'ok') {
            this.chartData.dataY = []
            this.chartData.dataLine = []
            res.data.sort((a,b) =>  new Date(a.day) - new Date(b.day)).map(item => {
              this.chartData.dataLine.push(item.score)
              if (this.dateTYpe === 10) {
                this.chartData.dataY.push(item.day.substring(11, 13) + '时')
              } else if (this.dateTYpe === 20) {
                this.chartData.dataY.push(item.day.substring(8) + '日')
              }
            })
            this.chartData.threshold = res.threshold || 0
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
    }
  }
</script>

<style scoped>
.analysisWrap{
  height: 28vh;
  padding: 14px;
  background: rgba(14,22,95,0.4);
  border: 1px solid rgba(14,101,187,0.66);
}
</style>
